<template>
  <div class="container">
    <!-- 头部 -->
    <header>
      <div
        v-if="isShowTitle"
        class="header-title"
        @dblclick="handleDbclickTitle"
      >
        {{ title }}
      </div>
      <el-input
        v-else
        v-focus
        class="title-input"
        v-model.trim="title"
        placeholder="请输入标题～"
        size="default"
        @blur="handleTitleBlur"
        @keyup.enter.native="handleTitleBlur"
      ></el-input>
    </header>
    <!-- 任务列表 -->
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <div class="card-time">
            <i class="iconfont icon-mdatepicker"></i>
            <span>{{ nowTime }}</span>
          </div>
          <el-button type="primary" link @click="handleAddTask">
            <el-icon>
              <CirclePlus />
            </el-icon>
            添加待办事项
          </el-button>
        </div>
      </template>
      <div v-if="tasks.length !== 0">
        <Draggable
          :list="tasks"
          :disabled="draggableDisabled"
          animation="200"
          @start="onStart"
          @end="onEnd"
          @click.stop
          item-key="id"
          tag="transition-group"
          :component-data="{
            name: 'fade',
            tag: 'div',
            type: 'transition-group',
          }"
        >
          <template #item="{ element }">
            <el-row :class="{ 'clear-transition': !isDrag }">
              <el-col>
                <el-checkbox
                  class="checkbox"
                  v-model="element.checked"
                  @change="handleCheckboxChange(element)"
                ></el-checkbox>
                <label
                  v-if="!element.isEdit"
                  class="checkbox-text"
                  :class="{ select: element.checked }"
                  @dblclick.stop="handleEditTask(element)"
                >
                  {{ element.label }}
                </label>
                <el-input
                  v-else
                  class="text-input"
                  v-focus
                  v-model="element.label"
                  placeholder="输入待办任务～"
                  size="default"
                  @blur="handleInputBlur(element)"
                ></el-input>
                <el-icon
                  class="el-icon-delete show-remove-icon"
                  @click="handleRemoveTask(element)"
                >
                  <Delete />
                </el-icon>
              </el-col>
            </el-row>
          </template>
        </Draggable>
      </div>
      <el-empty
        v-else
        :image-size="70"
        description="暂无任务列表，快去创建吧～"
      ></el-empty>
    </el-card>
    <!-- 底部 -->
    <footer>
      <el-button size="default" @click="handleSourceCode">
        <i class="iconfont icon-github"></i>源码
      </el-button>
      <el-button size="default" @click="handleContactAuthor">
        <i class="iconfont icon-weixin1"></i>联系我
      </el-button>
      <el-button size="default" @click="handleRewardAuthor" class="reward">
        <i class="iconfont icon-dashang1"></i>打赏
      </el-button>
      <el-button
        size="default"
        @click="handleClear"
        :disabled="clearDisabled"
        class="clear"
      >
        <i class="iconfont icon-qingkong1"></i>清空
      </el-button>
    </footer>
    <AuthorDialog ref="authorDialog" :isShowFooter="isShowFooter" />
    <ClearDialog ref="clearDialog" @confirm="handleConfirmClear" />
  </div>
</template>

<script setup>
import Draggable from "vuedraggable";
import { CirclePlus, Delete } from "@element-plus/icons-vue";
import AuthorDialog from "./components/author-dialog.vue";
import ClearDialog from "./components/clear-dialog.vue";
import { useHeader } from "../hook/useHeader";
import { useTasks } from "../hook/useTasks";
import { useFooter } from "../hook/useFooter";
import { setBadegeText } from "../utils/index";
import { watch } from "vue";
// 自定义指令
const vFocus = {
  mounted: (el) => {
    el.querySelector("input").focus();
  },
};
// 头部钩子
const { title, isShowTitle, handleDbclickTitle, handleTitleBlur } = useHeader();

// 任务钩子
const {
  nowTime,
  tasks,
  isDrag,
  draggableDisabled,
  setTasks,
  handleAddTask,
  onStart,
  onEnd,
  handleEditTask,
  handleInputBlur,
  handleRemoveTask,
  handleCheckboxChange,
} = useTasks();

// 底部钩子
const {
  authorDialog,
  clearDialog,
  isShowFooter,
  clearDisabled,
  setClearDisbled,
  handleSourceCode,
  handleContactAuthor,
  handleRewardAuthor,
  handleClear,
  handleConfirmClear,
} = useFooter(tasks, setTasks);

// 监听任务列表
watch(
  tasks,
  (newTasks) => {
    setClearDisbled(newTasks.length === 0);
    if (isDrag.value) {
      const undone = newTasks.filter((el) => !el.checked);
      setBadegeText(String(undone.length));
    }
  },
  {
    // deep: true, // 是否深度监听
    immediate: true, //  是否立即执行
  }
);
</script>

<style scoped>
@import "./popup.css";
</style>
